<template>
<!--
 * @FileDescription: 透明色 卡片框 公共样式抽取
 * @author Sun Yan
 * @Date $ 
-->
<div class="opacity-card-frame-container">
  <div class="opacity-card-frame-title">
    <i></i>
    <span>{{title}}</span>
  </div>
  <div class="top-horn"></div>
  <div class="bottom-horn"></div>
  <slot></slot>
</div>
</template>
<script>
 /**
  * @description: 方法描述
  * @param {参数类型} 参数名称
  * @param {参数类型} 参数名称
  * @return void
  */
export default {
    name: "opacity-card-frame",
    props: {
      title: {
        type: String,
        default: "书院内人员总数分布情况"
      }
    },
    data(){
        return {
            
        }
    },
    created() {
    
    },
    
    methods: {
    
    }
}
</script>

<style lang="scss">
  .opacity-card-frame {

    //  框框  父容器
    &-container {
      width: 100%;
      height: 644px;
      background-color: #051227;
      @extend %border;

      // 框框 四边 直角
      .top-horn,
      .bottom-horn {
        &:after {
          content: ' ';
          position: absolute;
          left: 0;
          @include wh(4px, 4px);
        }
        &:before {
          content: ' ';
          position: absolute;
          right: 0;
          @include wh(4px, 4px);
        }
      }
      .top-horn{
        &:after {
          top: 0;
          border-top: 1px solid $com-color-bright;
          border-left: 1px solid $com-color-bright;
        }

        &:before {
          border-top: 1px solid $com-color-bright;
          border-right: 1px solid $com-color-bright;
          top: 0;
        }
      }
      .bottom-horn{
        &:before {
          bottom: 0;
          border-bottom: 1px solid $com-color-bright;
          border-right: 1px solid $com-color-bright;
        }

        &:after {
          border-bottom: 1px solid $com-color-bright;
          border-left: 1px solid $com-color-bright;
          bottom: 0;
        }
      }

    }

    //  框框 标题 starts
    &-title {
      @include wh(100%, 32px);
      display: flex;
      align-items: center;
      padding-left: var(--mb-2);
      font-size: var(--normal-font-size);
      font-weight: normal;
      font-stretch: normal;
      color: #b6c4d7;
      @extend %border-bottom;
      > i {
        position: absolute;
        left: .8rem;
        top: 12px;
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background: #FFF;
        z-index: var(--z-tooltip);
      }
    }


  }
</style>